<template>
  <div>
    <el-form :inline="true" :model="parameters" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="parameters.name" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="用户状态">
        <el-select v-model="parameters.status">
          <el-option label="启用" :value="true"></el-option>
          <el-option label="禁用" :value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="danger" @click="delAll">批量删除</el-button>
        <el-button type="primary" @click="add">添加</el-button>
      </el-form-item>
    </el-form>

    <el-radio-group v-model="parameters.status" @change="query">
      <el-radio-button label="">全部</el-radio-button>
      <el-radio-button :label="true">启用</el-radio-button>
      <el-radio-button :label="false">禁用</el-radio-button>
    </el-radio-group>



    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="uId" label="编号" width="120"> </el-table-column>
      <el-table-column prop="account" label="账号" width="120">
      </el-table-column>
      <el-table-column prop="userName" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="eMail" label="邮箱" width="120"> </el-table-column>

      <el-table-column label="注册日期" width="150">
        <template slot-scope="scope">{{
          scope.row.createdTime | formatDateTime
        }}</template>
      </el-table-column>

      <el-table-column label="最后登录日期" width="150">
        <template slot-scope="scope">{{
          scope.row.lastLoginTime | formatDateTime
        }}</template>
      </el-table-column>

      <el-table-column label="是否启用" width="150">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isActive"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleDel(scope.row.uId)" type="text" size="small"
            >删除</el-button
          >
          <el-button @click="handleEdit(scope.row.uId)" type="text" size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="parameters.pageIndex"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="parameters.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>

    <!--编辑对话框-->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="userForm">
        <el-form-item label="账号" :label-width="formLabelWidth" prop="account">
          <el-input v-model="form.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="用户名"
          :label-width="formLabelWidth"
          prop="userName"
        >
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="eMail">
          <el-input v-model="form.eMail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          :label-width="formLabelWidth"
          prop="password"
        >
          <el-input
            v-model="form.password"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input
            v-model="form.remark"
            autocomplete="off"
            type="textarea"
            :rows="4"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否启用" :label-width="formLabelWidth">
          <el-radio v-model="form.isActive" :label="true">是</el-radio>
          <el-radio v-model="form.isActive" :label="false">否</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], //表格数据
      totalCount: 0, //总条数
      multipleSelection: [],  //选中的所有行数据
      parameters: {
        //请求参数对象
        pageIndex: 1,
        pageSize: 2,
        name: "",
        status: '', //空
      },

      dialogFormVisible: false, //控制对话框的显示
      formLabelWidth: "120px", //表单label的宽度值
      form: {
        //表单模型
        uId: 0,
        userName: "",
        account: "",
        eMail: "",
        password: "",
        remark: "",
        isActive: true, //是否启用
      },
      rules: {
        //表单验证规则的配置
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          //{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
        eMail: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          //{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          //{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
    };
  },
  mounted() {
    //挂载事件处理
    this.getList();
  },
  methods: {
    query() {
      this.parameters.pageIndex = 1;
      this.getList();
    },
    getList() {
      //加载列表
      this.axios({
        url: "api/Account/GetUserList",
        method: "get",
        params: this.parameters, //请求参数对象 传值
      }).then((res) => {
        console.log("加载列表", res.data); // 调试输出，标配代码
        this.tableData = res.data.data;
        this.totalCount = res.data.totalCount;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleDel(id) {
      //单删
      console.log(id);
      this.$confirm("是否确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //删除操作（略）

          //删除成功，则提示
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      //切换页大小
      console.log(`每页 ${val} 条`);
      this.parameters.pageSize = val;
      this.getList(); //重新加载数据
    },
    handleCurrentChange(val) {
      //切换当前页
      console.log(`当前页: ${val}`);
      this.parameters.pageIndex = val;
      this.getList();
    },
    handleEdit(id) {
      //修改
      console.log(id);
      //1. 返填数据
      this.axios({
        url: "/api/Account/Get",
        method: "get",
        params: {
          id: id,
        },
      }).then((res) => {
        console.log("返填", res.data); // 调试输出，标配代码
        this.form = res.data; //返填
        //2. 返填成功后，打开对话框
        this.dialogFormVisible = true; //打开对话框
      });
    },
    editSubmit() {
      //提交修改
      //字段的验证
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          //验证通过后，则提交到api进行修改
          this.axios({
            url: "api/Account/Update",
            method: "post",
            data: this.form, //修改提交数据用 data:
          }).then((res) => {
            console.log("修改提交", res.data); // 调试输出，标配代码
            if (res.data.result > 0) {
              //提示 修改成功并关闭对话框
              this.dialogFormVisible = false; //关闭对话框
              this.$message("修改成功");
              this.getList(); //重新加载
            }
          });
        } else {
          console.log("error submit!!");
          this.$message("您提交的数据无效，请重试！");
          return false;
        }
      });
    },
    delAll(){ //批量删除
      if(this.multipleSelection.length == 0){
        this.$message('请至少选择一条数据');
        return;
      }

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //正常的删除逻辑（调用接口）
          //var ids = this.multipleSelection.map(x=>x.uId).toString();   //拿出选中的主键，并转换成字符串 “1,3,9”
          this.axios({
            url:'/api/Account/Delete',
            method:'post',
            // params:{   //如果接口是?查询参数，则用params:{}来传值
            //   ids:ids
            // }
            data: this.multipleSelection.map(x=>x.uId)
          }).then((res)=>{
            if(res.data.result>0){
              this.$message({type: 'success', message: '批量删除成功!'});
              //刷新页面,重新加载数据
              this.getList(); 
            }
          });

         
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });          
        });

    }
  },
};
</script>